<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter @switch="switchWorkOrder" />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <template v-for="column in myColumns">
          <el-table-column :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
        </template>
        <el-table-column v-if="!forSelection" label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="text" title="打印" size="mini" icon="el-icon-printer" @click="print(row)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
import TableFilter from './components/tableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { page as peifaSLPage, detailById as peifaSLDetailById } from '@neu/dcam-ui/api/peifaSL'
import { page as jieyongSLPage, detailById as jieyongSLDetailById } from '@neu/dcam-ui/api/jieyongSL'
import { page as lingyongSLPage, detailById as lingyongSLDetailById } from '@neu/dcam-ui/api/lingyongSL'
import { formatDate } from '@neu/biz-core/utils/utils'
import { deepClone } from '@neu/biz-core/utils'
import { getLodop } from '@neu/dcam-ui/utils/LodopFuncs'

const CAT_GDZC = '1'
const CAT_DZYH = '2'
const CAT_XHP = '3'
const getCategoriyName = (categories) => {
  if (categories === CAT_GDZC) {
    return '固定资产'
  } else if (categories === CAT_DZYH) {
    return '低值易耗品'
  } else if (categories === CAT_XHP) {
    return '消耗品'
  } else {
    return '固定资产'
  }
}

const columns = [
  { title: '工单号', key: 'workOrderNum' },
  { title: '标题', key: 'title' },
  { title: '出库日期', key: 'createTime', sortable: 'custom',
    render: (h, params) => { return h('span', formatDate(params.row.createTime, 'YYYY-MM-DD')) }
  },
  { title: '操作人', key: 'createUserName' },
  { title: '资产类别', key: 'categories', sortable: 'custom',
    render: (h, params) => { return h('span', getCategoriyName(params.row.categories)) }
  }
]

export default {
  name: 'InoutSLPage',
  components: {
    TableFilter,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
  },
  data() {
    return {
      r: peifaSLPage,
      activeName: 'peifaSL',
      detailById: peifaSLDetailById
    }
  },
  computed: {
    myColumns: function() {
      const myColumns = deepClone(columns)
      if (this.activeName === 'peifaSL') {
        myColumns.push({ title: '配发部门', key: 'peifaOrgName', sortable: 'custom' })
        myColumns.push({ title: '配发数量', key: 'detailsSize' })
      } else if (this.activeName === 'jieyongSL') {
        myColumns.push({ title: '借用部门', key: 'orgName', sortable: 'custom' })
        myColumns.push({ title: '原因', key: 'reason' })
      } else if (this.activeName === 'lingyongSL') {
        myColumns.push({ title: '领用部门', key: 'orgName', sortable: 'custom' })
        myColumns.push({ title: '原因', key: 'reason' })
      }
      return myColumns
    }
  },
  methods: {
    switchWorkOrder(orderType) {
      if (orderType === 'peifaSL') {
        this.activeName = orderType
        this.r = peifaSLPage
        this.detailById = peifaSLDetailById
      } else if (orderType === 'jieyongSL') {
        this.activeName = orderType
        this.r = jieyongSLPage
        this.detailById = jieyongSLDetailById
      } else if (orderType === 'lingyongSL') {
        this.activeName = orderType
        this.r = lingyongSLPage
        this.detailById = lingyongSLDetailById
      }

      this.filter()
    },
    print(row) {
      this.detailById(row.id).then(response => {
        const printData = this.formatPrintData(response.data)
        const lodop = getLodop()
        lodop.PRINT_INIT('打印控件功能演示_Lodop功能_无边线表格')
        lodop.SET_PRINT_PAGESIZE(1, 2160, 1390)
        lodop.ADD_PRINT_TABLE(50, 10, '100%', 220, this.getHtml(printData))
        lodop.SET_PRINT_STYLEA(0, 'LinkedItem', -1)
        lodop.PREVIEW()
      })
    },
    formatPrintData(formData) {
      const printData = {
        workOrderNum: formData.workOrderNum,
        time: formatDate(formData.createTime, 'YYYY-MM-DD'),
        createUserName: formData.createUserName,
        createOrgName: formData.peifaOrgName || formData.orgName || '',
        assets: []
      }

      formData.assetStandingBook.forEach((it, idx) => {
        const asset = {
          seq: idx + 1,
          typeName: this.getPrintDefaultText(it.smallTypeName),
          name: this.getPrintDefaultText(it.name),
          code: this.getPrintDefaultText(it.code),
          quantity: this.getPrintDefaultText(it.amount),
          money: this.getPrintDefaultText(it.money),
          unit: this.getPrintDefaultText(it.measureUnit),
          brand: this.getPrintDefaultText(it.brand),
          specifications: this.getPrintDefaultText(it.specifications),
          user: this.getPrintDefaultText(it.managementUserName)
        }
        printData.assets.push(asset)
      })

      return printData
    },
    getHtml(printData) {
      let html = '<style>table,th{border:none;height:18px} td{border: 1px solid #000;height:18px}</style>' +
      '<table border=0 cellSpacing=0 cellPadding=0 width="95%" height="200" bordercolor="#000000" style="border-collapse:collapse;">' +
      '<caption><span style="border-bottom: solid 1px #000; padding-bottom: 8px;"><span style="border-bottom: solid 1px #000; padding-bottom: 5px;"><b><font face="黑体" size="4">安徽省农村信用社联合社实物资产出库单</font></b></span></span>' +
      '<br><br><br></caption>' +
      '<thead>' +
      '<tr><th colspan="5" style="text-align: left">工单号：' + printData.workOrderNum + '<br>&nbsp</th><th colspan="5" style="text-align: left">出库时间：' + printData.time + '<br>&nbsp</th></tr>' +
      '<tr><th colspan="5" style="text-align: left">申请部门：' + printData.createOrgName + '<br>&nbsp</th><th colspan="5" style="text-align: left">申请人：' + printData.createUserName + '<br>&nbsp</th></tr>' +
      '<tr><th colspan="3" style="text-align: left">备注（需求资料）：<br>&nbsp;</th><th colspan="7" style="text-align: left"><input type="checkbox">签报<input type="checkbox" style="margin-left: 60px">请示<input type="checkbox" style="margin-left: 60px">其它：<u>' +
      '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;' +
      '</u></th></tr>' +
      '<tr>' +
      '<td width="6%"><b>序号</b></td>' +
      '<td width="12%"><b>分类</b></td>' +
      '<td width="15%"><b>名称</b></td>' +
      '<td width="15%"><b>资产编号</b></td>' +
      '<td width="10%"><b>品牌</b></td>' +
      '<td width="10%"><b>规格型号</b></td>' +
      '<td width="6%"><b>单位</b></td>' +
      '<td width="6%"><b>数量</b></td>' +
      '<td width="10%"><b>单价(元)</b></td>' +
      '<td width="10%"><b>使用人</b></td>' +
      '</tr>' +
      '</thead>' +
      '<tbody>'

      let totalQuantity = 0
      let totalMonty = 0
      printData.assets.forEach((asset) => {
        html += '<tr>' +
        '<td width="6%">' + asset.seq + '</td>' +
        '<td width="12%">' + asset.typeName + '</td>' +
        '<td width="15%">' + asset.name + '</td>' +
        '<td width="15%">' + asset.code + '</td>' +
        '<td width="10%">' + asset.brand + '</td>' +
        '<td width="10%">' + asset.specifications + '</td>' +
        '<td width="6%">' + asset.unit + '</td>' +
        '<td width="6%">' + asset.quantity + '</td>' +
        '<td width="10%">' + asset.money + '</td>' +
        '<td width="10%">' + asset.user + '</td>' +
        '</tr>'

        totalQuantity += asset.quantity
        totalMonty += asset.money
      })

      html += '<tr>' +
      '<td colspan="7" style="text-align: center">总计</td>' +
      '<td>' + totalQuantity + '</td>' +
      '<td>' + totalMonty + '</td>' +
      '<td></td>' +
      '</tr>'

      html += '</tbody>'
      html += '<tfoot>'
      html += '<tr>' +
      '<th colspan="4" style="text-align: left"><b>&nbsp;<br>使用部门 资产管理员/领取人：</b></th>' +
      '<th colspan="6" style="text-align: left"><b>&nbsp;<br>资产管理部门 资产管理员/库管员：</b></th>' +
      '</tr>'
      html += '<tr>' +
      '<th colspan="9" style="text-align: left; font-size: 12px;">&nbsp;<br>第一联实物管理部门留存 第二联财务部门留存 第三联使用部门留存</th>' +
      '</tr>'
      html += '</tfoot>'
      html += '</table>'
      return html
    },
    getPrintDefaultText(val) {
      return !val ? '' : val
    }
  }
}
</script>
